<template>
  <div class="nav">
    <button type="primary" v-for="(item, index) in fang" :key="index" @click="handleShare">
      <a :href="item.data">生成访客预约链接</a>
    </button>
  </div>
</template>

<script setup>
import {
		ref,
		onBeforeUnmount
	} from 'vue';
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	import {
		visitor
	} from "@/utils/file.js";

	const fang = ref([]); // 使用 ref 创建响应式的数组

	// 请求访客预约数据
	visitor(uni.getStorageSync("token")).then(res => {
		console.log(res, "访客预约");
		fang.value.push(res.data);
	});

	const shareInstance = new UniShare();

	// 取消分享
	onBeforeUnmount(() => {
		shareInstance.hide();
	});
	// 定义分享函数
	const handleShare = () => {
		if (fang.value.length > 0) {
			const shareData = fang.value[0];
			shareInstance.show({
					content: {
						title: "访客预约",
						href: shareData,
						
					},
					menus: [{
							img: '@/static/app-plus/sharemenu/wechatfriend.png',
							text: '微信好友',
							share: {
								provider: 'weixin',
								scene: 'WXSceneSession',
							},
						},
						{
							imageUrl: '@/static/mipmap-xxxhdpi/icon_share_qq.png',
							text: 'QQ',
							share: {
								provider: 'qq',
							},
						},
						{
							img: '@/static/app-plus/sharemenu/copyurl.png',
							text: '复制',
							share: 'copyurl',
						},
						{
							img: '@/static/app-plus/sharemenu/more.png',
							text: '更多',
							share: 'shareSystem',
						},
					],
					cancelText: '取消分享',
				},
				(e) => {
					console.log(shareInstance.isShow);
					console.log(e);
				}
			);
		}
	};
</script>
<style scoped>
	button {
		width: 100%;
		position: absolute;
		bottom: 0;
	}

	a {
		color: white;
		text-decoration: none;
	}
</style>